<template>
    <el-dialog class="dialog" :title="title" :visible.sync="isShow" :close-on-click-modal="false"
        @close="onDialogClose">
        <el-form ref="form" label-width="auto" class="form" :model="formData" :rules="rules">
            <el-form-item label="上级组织:" prop="section_psn">
                <uxInputTree v-model="formData.section_psn" :selectParams="selectParams" :treeParams="treeParams"
                    :treeData="treeData" :disabled="isEdit" />
            </el-form-item>
            <el-form-item label="组织名称:" prop="section_name">
                <el-input v-model="formData.section_name" clearable maxlength="10" placeholder="请输入组织名称"></el-input>
            </el-form-item>
            <el-form-item label="组织电话:" prop="section_tel">
                <el-input v-model="formData.section_tel" placeholder="请输入组织电话" maxlength="11"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="onDialogClose">取 消</el-button>
            <el-button class="btn-confirm" @click="onSubmit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Getter, Action } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
import uxInputTree from "@/components/input/tree";
@Component({
    name: "parkOrgEdit",
    mixins: [mixinDialogForm],
    components: { uxInputTree }
})
export default class purviewDepartmentEdit extends Vue {
    @Action("parkOrg/add") itemAdd: any;
    @Action("parkOrg/edit") itemEdit: any;
    @Getter("parkOrg/bigTree") treeData: any;
    editInit(data: any) {
        const me = this as any;
        me.formData = Object.assign({}, me.formData, data);
    }
    selectParams: object = {
        clearable: true,
        placeholder: "请选择上级组织"
    };

    formData: any = {
        section_psn: "",
        section_name: "",
        section_tel: ""
    };
    // 表单验证
    rules: any = {
        section_psn: [
            {
                required: true,
                message: "请选择上级组织"
            }
        ],
        section_name: [
            {
                required: true,
                message: "请输入组织名称"
            }
        ],
        section_tel: [
            {
                message: "请输入组织电话"
            }
        ]
    };
    // 标题
    get title() {
        return (this as any).isEdit ? "编辑组织" : "新增组织";
    }

    treeParams: any = {
        clickParent: true,
        props: {
            children: "children",
            label: "section_name",
            value: "section_sn"
        }
    };
}
</script>